<template>
    <div class="box">
        <div class="left">
            <div class="top" style="height: 55%;padding: 15px;">
                <p class="detailTitle">封面:</p>
                <div class="cover" style="padding: 15px;height: 100%">
                    <img :src="imgUrl">
                </div>
            </div>
            <div class="bottom" style="height: 35%;padding: 15px;margin-top: 10px">
                <p class="detailTitle">标题:</p>
                <div class="cover" style="padding: 15px;height: 100%">
                    <p style="font-weight: bolder;font-size: 20px" v-text="title"></p>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;width: 60%;margin: 0 auto">
                <el-button color="#ff4949" :disabled="isDisabeld" @click="refApply(route.query.releaseId)">不通过</el-button>
                <el-button color="#1890ff" :disabled="isDisabeld" @click="passApply(route.query.releaseId)">通过</el-button>
            </div>
        </div>
        <div class="right">
            <p v-text="contentRich"></p>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="请输入驳回理由"
            width="500"
            :before-close="handleClose"
            style="padding: 20px"
        >
            <textarea v-model='refReason' style="width: 100%;height: 100px; border: 1px solid grey;resize: none;outline: 0"></textarea>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureRef">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>
<script setup lang="ts">

import request from "@/utils/request";
import {useRoute} from "vue-router";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {passRefReview} from "@/api/interface/interFace";
import {setReviewStats} from "@/api/system/review";

const isDisabeld=ref();
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};

function refApply(appId) {
    dialogVisible.value = true;
    refRefs.value.releaseId = appId;

}

function passApply(appId) {
    passReview.value.releaseId = appId;
    setReviewStats(passReview.value).then(() => {
        getOnceInfo(routes).then(res => {
            isDisabeld.value=Number(res.data.auditState);
            imgUrl.value = '/dev-api'+res.data.mainPic;
            title.value = res.data.title;
            contentRich.value = res.data.contentRich;
        });
        ElMessage({
            message: '已通过',
            type: 'success',
        });
    });
}

const passReview = ref<passRefReview>({
    releaseId: 0,
    auditState: '1'
});
const refRefs = ref<passRefReview>({
    releaseId: 0,
    auditState: "2",
    rejectionReason: ''
});
let refReason = ref('');
const route = useRoute();
const imgUrl = ref();
const title = ref();
const contentRich = ref();
let dialogVisible = ref(false);
const routes = route.query.releaseId;
function getOnceInfo(releaseId) {
    return request({
        url: `/jsRelease/${releaseId}`,
        method: 'get',
    });
}
getOnceInfo(routes).then(res => {
    isDisabeld.value=Number(res.data.auditState);
    imgUrl.value = '/dev-api'+res.data.mainPic;
    title.value = res.data.title;
    contentRich.value = res.data.contentRich;
});


function sureRef() {
    dialogVisible.value = false;
    refRefs.value.rejectionReason = refReason.value;
    setReviewStats(refRefs.value).then(() => {
        getOnceInfo(routes).then(res => {
            isDisabeld.value=Number(res.data.auditState);
            imgUrl.value = '/dev-api'+res.data.mainPic;
            title.value = res.data.title;
            contentRich.value = res.data.contentRich;
        });
        ElMessage({
            message: '已驳回',
            type: 'success',
        });
        refReason.value = '';

    });


}

</script>
<style scoped lang="scss">
.box {
    height: 688px;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 20%;
    border-right: 1px solid #6d6d6d;
    padding: 10px;
}

.right {
    width: 80%;
}

.detailTitle {
    font-weight: 700;
    font-size: 1.1em;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px #e1e1e1;
    box-shadow: 3px 3px #e1e1e1;
}

.right {
    padding: 20px;
}
</style>
